<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>itip demo</title>
         <link rel="stylesheet" href="theme/itip-blue.css" type="text/css" />
        <script src='js/jquery.js'></script>
        <script src='js/jquery.itip.js'></script>
        <script>
        $(document).ready(function(){
  			$(".t").itip({ajaxCache:true,delay:200});
        });
    	</script>
    </head>
    <body>
   
		<span class="t" itip="This is a simple tip.Do you like it?" ititle="Tip Title" ><a href='#'>a simple tip</a></span>
		
		<span class="t" itip='url:<%="data.html"%>' ititle="My Tip Title" ><a href='#'>a ajax tip</a></span>
    
    	<div class="t" itip="next:"><a href='#'>a custom tip</a></div>
    	<div style="display:none">
			<img src='img/sample.png' width='16px' height='16ox'/>
			This is a custom tip. <br/>
			it's very convinient.
		</div>
		
		<input type="button" value='change skin' onclick='change()'/>
    	<script>
			function change(){
				if ($("link").attr("href")=="theme/itip-yellow.css"){
					$("link").attr("href","theme/itip-blue.css");
				}else{
					$("link").attr("href","theme/itip-yellow.css");
				}
			}
		</script>
	</body>
</html>